<template>
  <div>
    <CustomDialog
      title="新增/编辑仓库"
      width="900px"
      :visible.sync="isShowDialog"
      @closed="handleCloseDialog"
    >
      <el-form
        ref="ruleForm"
        :model="form"
        :rules="rules"
        label-position="left"
        hide-required-asterisk
      >
        <div class="h1 mt-0">基本信息</div>
        <!-- 土地标题 -->
        <el-form-item label="" prop="name" class="row-all">
          <template #label>
            <div class="form-label required">仓库标题</div>
          </template>
          <el-input v-model="form.name" placeholder="20字以内文字描述"></el-input>
        </el-form-item>
        <!-- 面积 -->
        <el-form-item label="" prop="area" class="row-left">
          <template #label>
            <div class="form-label required">面积</div>
          </template>
          <el-input v-model="form.area" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">平米</div>
          </el-input>
        </el-form-item>
        <!-- 租售类型 -->
        <el-form-item prop="rentOrSale" class="row-right">
          <template #label>
            <div class="form-label required">租售类型</div>
          </template>
          <el-select v-model="form.rentOrSale" class="w-full">
            <el-option
              v-for="item in rentOrSaleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 租金 -->
        <el-form-item label="" prop="rent" class="row-left">
          <template #label>
            <div class="">租金</div>
          </template>
          <el-input
            v-model="form.rent"
            type="number"
            placeholder="请输入"
            :disabled="form.rentOrSale === '2'"
          >
            <div slot="suffix" class="pr-2 text-[#444450]">元/平米*月</div>
          </el-input>
        </el-form-item>
        <!-- 售价 -->
        <el-form-item label="" prop="price" class="row-right">
          <template #label>
            <div class="">售价</div>
          </template>
          <el-input
            v-model="form.price"
            type="number"
            placeholder="请输入"
            :disabled="form.rentOrSale === '1'"
          >
            <div slot="suffix" class="pr-2 text-[#444450]">元/平米</div>
          </el-input>
        </el-form-item>
        <!-- 仓库标签 -->
        <el-form-item prop="tags" class="row-all">
          <template #label>
            <div class="">仓库标签</div>
          </template>
          <el-select
            v-model="form.tags"
            class="w-full"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="可选择或自定义标签"
          >
            <el-option
              v-for="item in depositoryTagOptions"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 仓库地址 -->
        <el-form-item label="" prop="addrs" class="row-left mb-4">
          <template #label>
            <div class="">仓库地址</div>
          </template>
          <el-input v-model="form.addrs" readonly placeholder="点击右侧按钮在地图上选点">
            <i
              slot="suffix"
              class="el-icon-location-outline text-2xl pr-1 pt-[4px] cursor-pointer"
              @click="isShowMap = true"
            />
          </el-input>
        </el-form-item>
        <!--仓库介绍 -->
        <el-form-item label="" prop="desc" class="row-all">
          <template #label>
            <div>仓库介绍</div>
          </template>
          <el-input
            v-model="form.desc"
            type="textarea"
            :rows="3"
            maxlength="300"
            show-word-limit
            placeholder="300字以内文字描述"
          ></el-input>
        </el-form-item>
        <!-- 多媒体资料 -->
        <div class="h1">多媒体资料</div>
        <!-- 图片 -->
        <el-form-item label="" prop="imgList" class="row-all">
          <template #label>
            <div>图片</div>
          </template>
          <CustomUpload :img-list.sync="form.imgList" />
        </el-form-item>
        <!-- 视频 -->
        <el-form-item label="" prop="videoList" class="row-all">
          <template #label>
            <div>视频</div>
          </template>
          <VideoUpload :img-list.sync="form.videoList" />
        </el-form-item>
        <!-- VR全景 -->
        <el-form-item label="" prop="vrLink" class="row-all">
          <template #label>
            <div>VR全景</div>
          </template>
          <el-input v-model="form.vrLink" placeholder="粘贴全景链接"></el-input>
        </el-form-item>
        <!-- 详细信息 -->
        <div class="h1">详细信息</div>
        <!-- 仓库产权 -->
        <el-form-item prop="propertyRight" class="row-left">
          <template #label>
            <div class="form-label required">仓库产权</div>
          </template>
          <el-select v-model="form.propertyRight" class="w-full">
            <el-option
              v-for="item in propertyRightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 仓库类型 -->
        <el-form-item prop="type" class="row-right">
          <template #label>
            <div class="form-label required">仓库类型</div>
          </template>
          <el-select v-model="form.type" class="w-full">
            <el-option
              v-for="item in depositoryTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 仓库层数 -->
        <el-form-item label="" prop="floor" class="row-left">
          <template #label>
            <div class="form-label">仓库层数</div>
          </template>
          <el-input v-model="form.floor" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">层</div>
          </el-input>
        </el-form-item>
        <!-- 仓库层高 -->
        <el-form-item label="" prop="height" class="row-right">
          <template #label>
            <div class="form-label">仓库层高</div>
          </template>
          <el-input v-model="form.height" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">米</div>
          </el-input>
        </el-form-item>
        <!-- 仓库结构 -->
        <el-form-item prop="structure" class="row-left">
          <template #label>
            <div class="form-label required">仓库结构</div>
          </template>
          <el-select v-model="form.structure" class="w-full">
            <el-option
              v-for="item in structureOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 地面承重 -->
        <el-form-item label="" prop="bearing" class="row-right">
          <template #label>
            <div class="form-label">地面承重</div>
          </template>
          <el-input v-model="form.bearing" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">吨/平米</div>
          </el-input>
        </el-form-item>
        <!-- 占地面积 -->
        <el-form-item label="" prop="areaCovered" class="row-left">
          <template #label>
            <div class="form-label">占地面积</div>
          </template>
          <el-input v-model="form.areaCovered" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">平米</div>
          </el-input>
        </el-form-item>
        <!-- 院落面积 -->
        <el-form-item label="" prop="courtyardgArea" class="row-right">
          <template #label>
            <div class="form-label">院落面积</div>
          </template>
          <el-input v-model="form.courtyardgArea" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">平米</div>
          </el-input>
        </el-form-item>
        <!-- 设施设备 -->
        <div class="h1">设施设备</div>
        <!-- 消防等级 -->
        <el-form-item prop="fireLevel" class="row-left">
          <template #label>
            <div class="form-label">消防等级</div>
          </template>
          <el-select v-model="form.fireLevel" class="w-full">
            <el-option
              v-for="item in fireLevelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 消防设施 -->
        <el-form-item prop="fireFacilities" class="row-right">
          <template #label>
            <div class="form-label">消防设施</div>
          </template>
          <el-select v-model="form.fireFacilities" class="w-full">
            <el-option
              v-for="item in fireFacilitiesOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 变压器 -->
        <el-form-item prop="transformer" class="row-left">
          <template #label>
            <div class="form-label">变压器</div>
          </template>
          <el-select v-model="form.transformer" class="w-full">
            <el-option
              v-for="item in transformerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 提供雨棚 -->
        <el-form-item prop="rainshed" class="row-right">
          <template #label>
            <div class="form-label">提供雨棚</div>
          </template>
          <el-select v-model="form.rainshed" class="w-full">
            <el-option
              v-for="item in rainshedOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 招商需求 -->
        <div class="h1">招商需求</div>
        <!-- 意向产业 -->
        <el-form-item label="" prop="intendedIndustry" class="row-all">
          <template #label>
            <div class="form-label">意向产业</div>
          </template>
          <el-cascader
            id="industry"
            ref="industry"
            v-model="form.intendedIndustry"
            class="w-full"
            clearable
            filterable
            placeholder="招商意向产业，支持模糊搜索、选择"
            :options="industryTree"
            :props="{
              checkStrictly: true,
              multiple: true,
              value: 'code',
              label: 'name',
            }"
            @change="handleIndustryChange"
          ></el-cascader>
        </el-form-item>
        <!-- 联系人 -->
        <div class="h1">联系方式</div>
        <el-form-item label="" prop="contacts" class="row-all">
          <template #label>
            <div>联系人</div>
          </template>

          <div class="flex space-x-2 mb-2">
            <el-input v-model="form.contacts[0].name" placeholder="请输入" class="w-4/12" />
            <el-input v-model="form.contacts[0].phone" class="w-5/12" placeholder="输入联系方式" />
            <el-button type="text" @click="handleAddContacts">+新增联系人</el-button>
          </div>

          <div
            v-for="(item, index) in form.contacts.slice(1)"
            :key="index"
            class="flex space-x-2 mb-2"
          >
            <el-input v-model="item.name" placeholder="请输入" class="w-4/12" />
            <el-input v-model="item.phone" class="w-5/12" placeholder="输入联系方式" />
            <i
              class="el-icon-remove-outline text-xl cursor-pointer flex items-center"
              @click="handleDelContacts(index)"
            ></i>
          </div>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button class="rounded-content-wrap" @click="isShowDialog = false">取 消</el-button>
        <el-button type="primary" class="rounded-content-wrap" @click="handleOk">确 定</el-button>
      </span>
    </CustomDialog>

    <PositionPicker
      :visible.sync="isShowMap"
      :position.sync="form.position"
      :addrs.sync="form.addrs"
    />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import CustomUpload from '../common/CustomUpload/index.vue'
import VideoUpload from '../common/CustomUpload/videoUpload.vue'
import CustomDialog from '../common/CustomDialog/index.vue'
import PositionPicker from '../common/CustomAMap/PositionPicker.vue'
import {
  rentOrSaleOptions,
  propertyRightOptions,
  depositoryTypeOptions,
  structureOptions,
  fireLevelOptions,
  fireFacilitiesOptions,
  transformerOptions,
  alternatorOptions,
  sewagePipeOptions,
  rainshedOptions,
  depositoryTagOptions,
} from '../common/dictionary'
import addEditMixin from '../common/addEditMixin'
const selectKey = [
  { key: 'rentOrSale', options: 'rentOrSaleOptions' },
  { key: 'propertyRight', options: 'propertyRightOptions' },
  { key: 'type', options: 'depositoryTypeOptions' },
  { key: 'structure', options: 'structureOptions' },
  { key: 'fireLevel', options: 'fireLevelOptions' },
  { key: 'fireFacilities', options: 'fireFacilitiesOptions' },
  { key: 'transformer', options: 'transformerOptions' },
  { key: 'alternator', options: 'alternatorOptions' },
  { key: 'sewagePipe', options: 'sewagePipeOptions' },
  { key: 'rainshed', options: 'rainshedOptions' },
]

const treeKey = [{ key: 'intendedIndustry', refName: 'industry' }]

export default Vue.extend({
  components: { CustomUpload, CustomDialog, PositionPicker, VideoUpload },
  mixins: [addEditMixin({ selectKey, treeKey, templateName: 'B_CONSOLE_DEPOSITORY' })],
  data() {
    return {
      form: {
        name: null,
        area: null,
        rentOrSale: null,
        rent: null,
        price: null,
        tags: [],
        position: null,
        addrs: null,
        desc: null,
        imgList: [],
        videoList: [],
        vrLink: null,
        propertyRight: null,
        type: null,
        floor: null,
        height: null,
        structure: null,
        bearing: null,
        areaCovered: null,
        courtyardgArea: null,
        fireLevel: null,
        fireFacilities: null,
        transformer: null,
        rainshed: null,
        trustDistribution: null,
        intendedIndustry: [],
        contacts: [{ name: '', phone: '' }],
      },
      rules: {
        name: [
          { required: true, message: '请输入仓库标题', trigger: 'blur' },
          { min: 3, max: 20, message: '长度为3~20个字符', trigger: 'blur' },
        ],
        area: [{ required: true, message: '请输入仓库面积', trigger: 'blur' }],
        rentOrSale: [{ required: true, message: '请选择租售类型', trigger: 'change' }],
        addrs: [{ required: true, message: '请选择仓库地址', trigger: 'blur' }],
        propertyRight: [{ required: true, message: '请选择产权类型', trigger: 'change' }],
        type: [{ required: true, message: '请选择仓库类型', trigger: 'change' }],
      },
      rentOrSaleOptions,
      propertyRightOptions,
      depositoryTypeOptions,
      structureOptions,
      fireLevelOptions,
      fireFacilitiesOptions,
      transformerOptions,
      alternatorOptions,
      sewagePipeOptions,
      rainshedOptions,
      depositoryTagOptions,
    }
  },
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/form.scss';
</style>
